<template>
	<view>
		<view class="comments">
			<view class="comments-items" v-for="(item, index) in commentContents" :key="index">
				<image :src="item.logo" class="comments-face"></image>
				<view class="comments-body">
					<view class="comments-header">{{item.name}}</view>
					<view class="comments-content">
						{{item.content}}
					</view>

					<view class="comments-info">
						<text class="grey" style="font-size: 24rpx;">昨天 19:30</text>
						<text class="comments-replay-btn" @click="replay()">回复</text>
						<i class="zi zi_digg zi-icon-right zi-icon-click" v-if="item.clickType"></i>
						<i class="zi zi_digg zi-icon-right " v-else></i>
					</view>

					<view class="comments-reply">
						<view class="reply">
							<view class="comments-items " v-for="(item2, index2) in item.reply" :key="index2">
								<image :src="item2.logo" class="comments-face"></image>
								<view class="comments-body">
									<view class="comments-header">
										{{item2.name}}
										
									</view>
									<view class="comments-content">
										<text class="comments-reply-name" v-if="item2.reply_name">
											<text style="font-weight: bold;">@{{item2.reply_name}}</text>
										</text> 
										<text>{{item2.content}}</text>
									</view>
									<view class="comments-info">
										<text class="grey" style="font-size: 24rpx;">昨天 19:30</text>
										<text class="comments-replay-btn" @click="replay(item2.name)">回复</text>
						                <i class="zi zi_digg zi-icon-right zi-icon-click" v-if="item2.clickType"></i>
						                <i class="zi zi_digg zi-icon-right " v-else></i>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="comments-more" @click="showMore()">
						<text style="margin-right: 10rpx;font-size:36rpx;">—</text>
						<text v-if="loadingState=='loadmore'">展开{{item.totalCount}}条回复</text>
						<text v-if="loadingState!='loadmore'">{{loadingState=="nomore"?"收起":"展开更多"}}</text>
						<svg t="1600674701420" class="icon comments-more-icon"
							:class="{'comments-more-icon-rotate':loadingState=='nomore'}" viewBox="0 0 1024 1024"
							version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3631" width="14" height="14">
							<path
								d="M113.27683429 155.94627634l799.4199333 0c44.24124361 0 80.02419363 35.50497793 80.02419365 79.74225054 0 20.57390573-7.89043628 39.17023849-20.57390572 53.25945242l-395.33984827 527.4996929c-26.49074017 34.93712067-76.36290417 42.2676418-111.58990998 15.78087266-6.20274865-4.5110899-11.55172587-9.86403813-15.78087266-15.78087266L49.59342845 283.31308797c-26.20482607-34.9410917-19.15624802-85.09519879 16.0628158-111.30399583C80.03137236 161.01728144 96.65410329 155.94627634 113.27683429 155.94627634L113.27683429 155.94627634z"
								p-id="3632" fill="#B7B7B7"></path>
						</svg>
					</view>
				</view>
			</view>
		</view>
		<view class="comment_input">

		</view>
	</view>
</template>

<script>
	// import graceComment from '../../graceUI/components/graceComment.vue';

	export default {
		components: {
			// graceComment
		},
		data() {
			return {
				loadingState: 'loadmore', //加载前值为loadmore，没有数据为nomore
				commentContents: [{
					"content": "故国三千里，深宫二十年。一声何满子，双泪落君前。纵使日落清明，明月挂空，寥星冥冥，与我何情！",
					"name": " - 小码",
					"logo": "https://sns-img-hw.xhscdn.com/a1b708de-bb5e-e739-b586-8b912dfdf3d2?imageView2/2/w/1200/format/webp",
					"date": "08/10 08:00",
					"reply": [{
						"content": "您们都是大诗人，我寡言了",
						"name": " - 绿头鹅，鹅鹅曲靖向天歌",
						"reply_name": "陈旧的回忆",
						"reply_content": "劝君更进一杯酒，西出阳关无故人。",
						"logo": "https://sns-img-hw.xhscdn.com/77a50404-992f-3ca4-1ed3-595b6c18f9a1?imageView2/2/w/1200/format/webp",
						"date": "08/10 08:00",
					},
					{
						"content": "劝君更进一杯酒，西出阳关无故人。",
						"name": " - 陈旧的回忆",
						"reply_name": "",
						"reply_content": "",
						"logo": "https://sns-img-bd.xhscdn.com/51883040-b869-3cc8-4564-6b1e49df7c91?imageView2/2/w/900/format/webp",
						"date": "08/10 08:00",
					}]
				}]
			};
		},
		methods: {
			replay(replayName) {
				console.log(replayName);
			},
			showMore() {
				console.log('加载更多')
			}
		},

	}
</script>

<style lang="less">
	.grey {
		color: #999999;
	}

	.common_flex {
		display: flex;
		font-weight: ;
	}

	.comments {
		.comments-items {
			display: flex;
			margin-bottom: 32rpx;

			.comments-face {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.comments-body {
				width: calc(100% - 100rpx);
				padding-left: 16rpx;

				.comments-header {
					margin-top: 8rpx;
					margin-bottom: 8rpx;
					color: #8D8C91;
					font-weight: bold;
				}

				.comments-info {
					margin-top: 8rpx;

					.comments-replay-btn {
						color: #8E8D95;
						margin-left: 32rpx;
						font-weight: bold;
						letter-spacing: 2rpx;
					}
					.zi-icon-right {
						margin-left: 50rpx;
						font-size: 28rpx;
					}
					.zi-icon-click {
						color: red;
					}
				}

				.comments-reply {
					margin-top: 16rpx;
				}

				.comments-more {
					margin-top: 8rpx;
					color: #999999;
					word-spacing: 10rpx;
					display: flex;
					align-items: center;

					.comments-more-icon {
						margin-left: 8rpx;
					}

					.comments-more-icon-rotate {
						transform: rotate(180deg);
					}
				}
			}

		}
	}

	.reply {
		.comments-items {
			margin-bottom: 8rpx;

			.comments-face {
				width: 70rpx;
				height: 70rpx;
			}

			.comments-body {
				.comments-header {
					font-size: 26rpx;
					display: flex;
					align-items: center;

					.reply-more-icon-rotate {
						transform: rotate(270deg);
						width: 24rpx;
						height: 24rpx;
						margin: 0 6rpx;
					}
				}

				.comments-content {
					font-size: 26rpx;
					
					.comments-reply-name {
						margin-right: 20rpx;
					}
					
				}

				.comments-info {
					margin-top: 8rpx;

					.comments-replay-btn {
						font-size: 26rpx;
					}
				}


			}

		}
	}
</style>
